/**
 * @author nnimova
 */

YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', 'button', function(Y) {
//Listen for all drop:over events
Y.DD.DDM.on('drop:over', function(e) {
    //Get a reference to our drag and drop nodes
    var drag = e.drag.get('node'),
        drop = e.drop.get('node');
   
    //Are we dropping on a li node?
    if (drop.get('tagName').toLowerCase() === 'li') {
        //Are we not going up?
        if (!goingUp) {
            drop = drop.get('nextSibling');
        }
        //Add the node to this list
        e.drop.get('node').get('parentNode').insertBefore(drag, drop);
        //Resize this nodes shim, so we can drop on it later.
        e.drop.sizeShim();
    }
});
//Listen for all drag:drag events
Y.DD.DDM.on('drag:drag', function(e) {
    //Get the last y point
    var y = e.target.lastXY[1];
    //is it greater than the lastY var?
    if (y < lastY) {
        //We are going up
        goingUp = true;
    } else {
        //We are going down.
        goingUp = false;
    }
    //Cache for next check
    lastY = y;
});
//Listen for all drag:start events
Y.DD.DDM.on('drag:start', function(e) {
    //Get our drag object
    var drag = e.target;
    //Set some styles here
    drag.get('node').setStyle('opacity', '.25');
    drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
    drag.get('dragNode').setStyles({
        opacity: '.5',
        borderColor: drag.get('node').getStyle('borderColor'),
        backgroundColor: drag.get('node').getStyle('backgroundColor')
    });
});
//Listen for a drag:end events
Y.DD.DDM.on('drag:end', function(e) {
    var drag = e.target;
    //Put our styles back
    drag.get('node').setStyles({
        visibility: '',
        opacity: '1'
    });
});
//Listen for all drag:drophit events
Y.DD.DDM.on('drag:drophit', function(e) {
    var drop = e.drop.get('node'),
        drag = e.drag.get('node');
   
            //if we are not on an li, we must have been dropped on a ul
    if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
            }
        }
    });
   
    //Static Vars
        var goingUp = false, lastY = 0;
   
        //Get the list of li's in the lists and make them draggable
var lis = Y.Node.all('#play ul li');
lis.each(function(v, k) {
    var dd = new Y.DD.Drag({
        node: v,
        target: {
            padding: '0 0 0 20'
        }
    }).plug(Y.Plugin.DDProxy, {
        moveOnEnd: false
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#play ul'
            });
        });
   
        //Create simple targets for the 2 lists.
var uls = Y.Node.all('#play ul');
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
   
    var button = new Y.Button({
        srcNode:'#check',
    on: {
        'click': function(){
            var lis1 = document.getElementById("list1").getElementsByTagName("li");
            var lis2 = document.getElementById("list2").getElementsByTagName("li");
            var flag = true;
           
            for(var i=0;i<lis1.length;i++){
                    if(lis1[i].getAttribute('data') == lis2[i].getAttribute('data'))
                            continue;
                    else{
                            flag = false;
                            break;
                    }
            }
           
           
            if(flag){
                    document.getElementById("resultLBL").textContent = "Correct!";
                    document.getElementById("resultLBL").style.color= "green";
                    setTimeout(function(){window.top.document.getElementById('blocker').style.display = 'none';localStorage['time']=new Date().getTime();},1000);
            }
            else{
                    document.getElementById("resultLBL").textContent = "Try Again";
                    document.getElementById("resultLBL").style.color= "red";
                }
            }
        }
    }).render();
});